<script>
export default {
  props: ['nodeId', 'nodeItem'],
  watch: {
    nodeId: function (n, o) {
      if (n !== o) {
        this.tableData.curNodeId = this.nodeId
        this.fetchData()
      }
    }
  },
  data() {
    return {
      activeMenu1: '绑定仪表',
      activeMenu2: '关联能耗主体',
      tableData: {
        curNodeId: null,
        meters: [],
        subjects: []
      },
      dialogInfo: {
        title: '绑定仪表',
        dialogVisible: false,
        meterMode: true,
        subjectList: [],
        meterList: [],
        selected: null
      }
    }
  },
  mounted() {
    if (this.nodeId) {
      this.tableData.curNodeId = this.nodeId
      this.fetchData()
    }
  },
  methods: {
    submitDialog: function () {
      if (!this.dialogInfo.selected || this.dialogInfo.selected.indexOf('-') <= 0) {
        return
      }
      const reqParam = {
        content: {
          subjectType: this.dialogInfo.selected.split('-')[1],
          subjectId: this.dialogInfo.selected.split('-')[0],
          diagramId: this.tableData.curNodeId
        }
      }
      this.$axios({url:'/ems/client/base/diagram/relate/add',data: reqParam}).then((content) => {
        if (content) {
          this.$message("操作成功")
          this.fetchData()
        }
      })
      this.dialogInfo.dialogVisible = false
    },
    showDialog: function(meterMode) {
      const dialogInfo = this.dialogInfo
      dialogInfo.selected = null
      dialogInfo.meterList = []
      dialogInfo.subjectList = []
      const existedKey = [];
      this.tableData.subjects.forEach(function (item) {
        const key = item.subjectType + ':' + item.subjectId
        existedKey.push(key)
      })
      this.tableData.meters.forEach(function (item) {
        const key = item.subjectType + ':' + item.subjectId
        existedKey.push(key)
      })
      const addSubject = function (item) {
        const key = item.subjectType + ':' + item.subjectId
        if (existedKey.includes(key)) {
          return
        }
        if (item.subjectType === 'METER') {
          dialogInfo.meterList.push(item)
        }else {
          dialogInfo.subjectList.push(item)
        }
      }
      const curNodeId = this.tableData.curNodeId
      dialogInfo.meterMode = meterMode
      const reqParam = {content:{}}
      if (meterMode) {
        dialogInfo.title = '绑定仪表'
        this.$axios({url:'/ems/client/base/meter/list',data: reqParam}).then((content) => {
          content.list.forEach(function (item) {
            const ojb = {
              subjectType: 'METER',
              subjectId: item.id,
              diagramId: curNodeId,
              subjectName: item.name
            }
            addSubject(ojb)
          })
        })
        dialogInfo.dialogVisible = true
        return
      }
      dialogInfo.title = '关联能耗主体'
      this.$axios({url:'/ems/client/base/department/list',data: reqParam}).then((content) => {
        content.list.forEach(function (item) {
          const ojb = {
            subjectType: 'DEPARTMENT',
            subjectId: item.id,
            diagramId: curNodeId,
            subjectName: JSON.parse(item.nameInfo).shortName['zh-CN']
          }
          addSubject(ojb)
        })
      })
      this.$axios({url:'/ems/client/base/building/list',data: reqParam}).then((content) => {
        content.list.forEach(function (item) {
          const ojb = {
            subjectType: 'BUILDING',
            subjectId: item.id,
            diagramId: curNodeId,
            subjectName: JSON.parse(item.nameInfo).shortName['zh-CN']
          }
          addSubject(ojb)
        })
      })
      console.log(dialogInfo.subjectList)
      dialogInfo.dialogVisible = true
    },
    dialogHandleClose: function () {
      this.dialogInfo.dialogVisible = false
    },
    deleteRelation: function (relationId, subjectType) {
      this.$axios({url:'/ems/client/base/diagram/relate/delete',data: {content: {relationId: relationId, subjectType: subjectType}}}).then((content) => {
        if (content) {
          this.$message("操作成功")
          this.fetchData()
        }
      });
    },
    fetchData: function () {
      if (!this.tableData.curNodeId) {
        this.tableData.subjects = []
        this.tableData.meters = []
        return
      }
      this.$axios({url:'/ems/client/base/diagram/relate/list',data: {content: this.tableData.curNodeId}}).then((content) => {
        this.tableData.meters = content.meters
        this.tableData.subjects = content.subjects
      });
    }
  }
}
</script>

<template>
  <el-row>
    <div style="margin-left: 3%;">
      <el-button type="primary" plain v-if="nodeItem.virtual === 'N'" @click="showDialog(true)">继续绑定仪表</el-button>
      <el-button type="primary" plain v-if="nodeItem.virtual === 'N'" @click="showDialog(false)">继续关联能耗主体</el-button>
      <el-tabs v-model="activeMenu1">
        <el-tab-pane label="绑定仪表" name="绑定仪表">
          <el-table  stripe border :data="tableData.meters">
            <el-table-column  prop="subjectId"  label="仪表ID"></el-table-column>
            <el-table-column  prop="subjectName"  label="仪表名称"></el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100">
              <template slot-scope="scope">
                <el-button @click="deleteRelation(scope.row.relationId, scope.row.subjectType)" type="text" size="small">解绑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-tabs v-model="activeMenu2">
        <el-tab-pane label="关联能耗主体" name="关联能耗主体">
          <el-table  stripe border :data="tableData.subjects">
            <el-table-column  prop="subjectId"  label="类型">
              <template scope="scope">
                {{scope.row.subjectType && scope.row.subjectType === 'DEPARTMENT' ? '科室': '建筑'}}
              </template>
            </el-table-column>
            <el-table-column  prop="subjectId"  label="ID"></el-table-column>
            <el-table-column  prop="subjectName"  label="名称"></el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100">
              <template slot-scope="scope">
                <el-button @click="deleteRelation(scope.row.relationId, scope.row.subjectType)" type="text" size="small">解除关联</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-dialog :title="dialogInfo.title" :visible.sync="dialogInfo.dialogVisible" width="30%" :before-close="dialogHandleClose">
        <el-select filterable v-model="dialogInfo.selected" placeholder="请选择" v-if="dialogInfo.meterMode">
          <el-option
              v-for="(item, index) in dialogInfo.meterList"
              :key="index"
              :label="item.subjectName"
              :value="item.subjectId + '-' + item.subjectType">
          </el-option>
        </el-select>

        <el-select v-model="dialogInfo.selected" placeholder="请选择" v-if="!dialogInfo.meterMode">
          <el-option
              v-for="(item, index) in dialogInfo.subjectList"
              :key="index"
              :label="(item.subjectType === 'BUILDING' ? '建筑：' : '科室：')+ item.subjectName"
              :value="item.subjectId + '-' + item.subjectType">
          </el-option>
        </el-select>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogInfo.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDialog">绑定</el-button>
        </span>
      </el-dialog>
    </div>
  </el-row>
</template>

<style>

</style>
